<style lang="scss" scoped>
.sex {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  top: 248px;
  // left: 84px;
  // left: 271px;
}
</style>

<template>
  <div>
    <div>
      <van-nav-bar title="性别" left-arrow @click-left="router.back()"></van-nav-bar>
      <div style="display: flex; justify-content: space-around; margin-top: 100px">
        <img src="../../images/Girl.png" height="125" width="120" @click="changeSex(true)" alt="" />
        <img src="../../images/Boy.png" height="125" width="120" @click="changeSex(false)" alt="" />
      </div>
      <div class="sex" :style="{ left: Sex == '男' ? '271px' : '84px' }">
        <img src="../../images/success.png" style="width: 100%; height: 100%" alt="" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { request } from '../../axios/request'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { userStore } from '../../stores/user'
// 获取仓库
const user = userStore()
// 路由跳转
const router = useRouter()
// 性别存储
const Sex = ref(user.sex || '')
console.log(Sex.value, '性别')

// 拿取userId, sessionId
  const userId= JSON.parse(localStorage.getItem('userId') || '') // 示例用户 IDzzz
   const sessionId= JSON.parse(localStorage.getItem('sessionId') || '') // 示例会话 ID

// 修改性别
const changeSex = async (value: boolean) => {
  await request
    .put(
      '/api/health/user/verify/v1/updateUserSex',
      {
        sex: value ? 2 : (1 as number)
      },
      {
        headers: {
          userId: userId as number,
          sessionId: sessionId as string,
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }
    )
    .then((res) => {
      console.log(res)
      ElMessage.success('修改成功')
      Sex.value = value ? '女' : '男'
      user.sex = Sex.value
    })
}
</script>